<template>
	<view>
		<view class="navbar">
			<text class="title">首页</text>
			<view class="search">
				<u-icon name="search" class="icon"></u-icon>
				<input type="text" placeholder="请输入关键字" v-model="value">
				<button @click="submit">搜索</button>
			</view>
		</view>
		<scroll-view scroll-y="true">
			<view class="content">
				<u-swiper :list="swiperImg" mode="round" class="swiper" height="300" @click="to1"></u-swiper>
				<view class="category">
					<navigator :url="item.link" v-for="item in cateImgList" class="cate-item">
						<image :src="item.imgUrl" mode="" class="icon"></image>
						<text class="name">{{item.name}}</text>
					</navigator>
					<navigator url="" class="cate-item">
						<u-icon name="list" class="icon last" size="60" color="#2979ff"></u-icon>
						<text class="name">更多服务</text>
					</navigator>
				</view>
				<view class="hot">
					<text class="title">热门主题</text>
					<view class="hot-pannel">
						<navigator :url="`/pages/news-detail/news-detail?id=${item.id}&title=${item.title}`" v-for="item in hotList" class="hot-item">
							<image :src="baseUrl + item.cover" mode=""></image>
							<text class="name">{{item.title}}</text>
						</navigator>
					</view>
				</view>
				<view class="news">
						<u-tabs :list="tabList" :is-scroll="true" :current="tabCurrent" @change="tabsChange"></u-tabs>
					<view class="news-list">
						<view class="new-item" v-for="(item, index) in newsList" @click="to2(item)">
							<text class="name">{{item.title}}</text>
							<!-- <text class="desc">{{item.content}}</text> -->
							<rich-text :nodes="item.content" class="desc"></rich-text>
							<image :src="baseUrl+ item.cover" mode=""></image>
							<view class="buttom">
								<view class="buttom-item">
									<u-icon name="chat" color="#666"></u-icon>
									<text>{{item.commentNum}}</text>
								</view>
								<view class="buttom-item">
									<u-icon name="thumb-up" color="#666"></u-icon>
									<text>{{item.likeNum}}</text>
								</view>
								<view class="buttom-item">
									<u-icon name="eye" color="#666"></u-icon>
									<text class="eye">{{item.readNum}}</text>
								</view>
								<view class="buttom-item">
									<text>{{item.publishDate}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				swiperImg: [],
				swiperList: [],
				baseUrl: 'http://124.93.196.45:10001/',
				cateImgList: [],
				hotList: [],
				tabList: [],
				tabCurrent: 0,
				newsList: [],
				flag: false
			}
		},
		onLoad() {
			this.getSwiperData()
			this.getCateData()
			this.getHotData()
			this.getTabList()
		},
		methods: {
			submit(){
				uni.navigateTo({
					url:`/pages/search/search?key=${this.value}`
				})
			},
			async getSwiperData() {
				const res = await this.$http({
					url: '/prod-api/api/rotation/list',
					data: {
						type: 2
					}
				})
				console.log(res)
				this.swiperList = res.data.rows
				this.swiperImg = res.data.rows.map((item) => ({
					image: this.baseUrl + item.advImg
				}))
				console.log(this.swiperImg)
			},
			to1(index){
				const id = this.swiperList[index].id
				const title = this.swiperList[index].title
				console.log(id)
				uni.navigateTo({
					url: `/pages/news-detail/news-detail?id=${id}&title=${title}`
				})
			},
			to2(item){
				uni.navigateTo({
					url:`/pages/news-detail/news-detail?id=${item.id}&title=${item.title}`
				})
			},
			async getCateData() {
				const res = await this.$http({
					url: '/prod-api/api/service/list'
				})
				console.log(res)
				this.cateImgList = res.data.rows.map(item => ({
					imgUrl: this.baseUrl + item.imgUrl,
					link: item.link,
					name: item.serviceName
				}))
				this.cateImgList = this.cateImgList.slice(0, 9)
				console.log(this.cateImgList)
			},
			async getHotData() {
				const res = await this.$http({
					url: '/prod-api/press/press/list',
					data: {
						hot: 'Y'
					}
				})
				console.log(res)
				this.hotList = res.data.rows
			},
			async getTabList() {
				const res = await this.$http({
					url: '/prod-api/press/category/list'
				})
				console.log(res)
				this.tabList = res.data.data.map((item) => ({
					name: item.name,
					id: item.id
				}))
				console.log(this.tabList)
				this.flag = true
				this.getNewsList()
			},
			tabsChange(index) {
				this.tabCurrent = index
				this.getNewsList()
			},
			// transition(e) {
			// 	let dx = e.detail.dx
			// 	this.$refs.uTabs.setDx(dx)
			// },
			// animationfinish(e) {
			// 	// this.$refs.uTabs.setFinishCurrent(e.detail.current)
			// 	this.swiperCurrent = e.detail.current
			// 	this.tabCurrent = e.detail.current
			// },
			async getNewsList() {
				if(this.flag === true){
					const res = await this.$http({
						url: '/prod-api/press/press/list',
						data: {
							type: this.tabList[this.tabCurrent].id
						}
					})
					this.newsList = res.data.rows
				}			
			}
			// async getNewsList1(){
			// 	const res = await this.$http({
			// 		url: '/prod-api/press/press/list',
			// 		data: {
			// 			type: 9
			// 		}
			// 	})
			// 	this.newsList = res.data.rows
			// }
		// },
		// computed: {
		// 	selectNewList() {
		// 		return this.newsList.filter(item => item.id === this.tabList[this.tabCurrent].id)
		// 	}
		// }
	},
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
		view {
			height: 100%;
			display: flex;
			flex-direction: column;

			.navbar {
				background-color: #fff;
				display: flex;
				flex-direction: column;
				align-items: center;
				height: 180rpx;

				.title {
					margin-top: 20rpx;
					color: #dd6161;
					font-weight: bold;
					font-size: 40rpx;
				}

				.search {
					width: 90%;
					border-radius: 50rpx;
					border: 1rpx solid #dd6161;
					display: flex;
					flex-direction: row;
					align-items: center;
					height: 64rpx;
					margin-top: 20rpx;
					position: relative;
					background-color: #f2f2f2;

					.icon {
						margin-left: 20rpx;
					}

					input {
						font-size: 28rpx;
						margin-left: 20rpx;
					}

					button {
						height: 95%;
						width: 120rpx;
						border-radius: 50rpx;
						background-color: #fa3534;
						font-size: 28rpx;
						text-align: center;
						display: flex;
						align-items: center;
						position: absolute;
						right: 2rpx;
						color: #fff;
					}
				}
			}

			scroll-view {
				flex: 1;
				overflow: hidden;

				.content {
					background-color: #F7F7F7;
					padding: 0 20rpx;
					height: fit-content;

					.swiper {
						height: fit-content;
					}

					.category {
						display: flex;
						flex-direction: row;
						flex-wrap: wrap;
						justify-content: start;
						height: fit-content;
						margin-top: 20rpx;

						.cate-item {
							padding: 20rpx 10rpx;
							width: 120rpx;
							height: fit-content;
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							
							.icon {
								width: 100rpx;
								height: 100rpx;
							}

							.last {
								border-radius: 50%;
								border: 6rpx solid blue;
								display: flex;
								justify-content: center;
							}

							.name {
								margin-top: 10rpx;
								font-size: 22rpx;
								white-space: nowrap;
								width: 100%;
								text-align: center;
								text-overflow: ellipsis;
								overflow: hidden;
								color: #666;
								// display: -webkit-box;
								// -webkit-line-clamp: 1;
								// -webkit-box-orient: vertical;
							}
						}
					}

					.hot {
						background-color: #fff;
						margin-top: 20rpx;
						display: flex;
						flex-direction: column;
						height: fit-content;

						.title {
							text-align: center;
							font-weight: bold;
							color: #dd6161;
							font-size: 40rpx;
							margin-top: 20rpx;
						}

						.hot-pannel {
							display: flex;
							flex-direction: row;
							justify-content: space-between;
							margin-top: 20rpx;
							height: fit-content;

							.hot-item {
								width: 50%;
								height: 350rpx;
								display: flex;
								flex-direction: column;
								align-items: center;

								&:nth-child(1) {
									border-right: 2rpx solid #eee;
								}

								image {
									width: 300rpx;
									height: 220rpx;
									border-radius: 40rpx;
								}

								.name {
									width: 300rpx;
									white-space: nowrap;
									overflow: hidden;
									text-overflow: ellipsis;
									margin-top: 20rpx;
									font-size: 32rpx;
									color: #262626;
								}
							}
						}
					}

					.news {
						margin-top: 20rpx;
						background-color: #fff;
						.news-list{
							display: flex;
							flex-direction: column;
							.new-item {
								display: flex;
								flex-direction: column;
								height: fit-content;
								padding: 20rpx 0;
								// border-bottom: 2rpx solid #eee;
								position: relative;
								&::after{
									content: '';
									position: absolute;
									width: 90%;
									height: 3rpx;
									bottom: 0;
									left: 30rpx;
									background-color: #eee;
								}
								.name {
									font-size: 32rpx;
									font-weight: bold;
									text-indent: 2em;
									white-space: nowrap;
									overflow: hidden;
									text-overflow: ellipsis;
								}
								.desc{
									display: -webkit-box;
									-webkit-box-orient: vertical;
									-webkit-line-clamp: 2;
									overflow: hidden;
									margin-top: 20rpx;
									line-height: 1.5em;
								}
								image{
									border-radius: 20rpx;
									width: 100%;
									height: 320rpx;
									margin-top: 20rpx;
								}
								.buttom {
									display: flex;
									flex-direction: row;
									justify-content: start;
									margin-top: 20rpx;
									.buttom-item{
										margin-left: 20rpx;
										display: flex;
										flex-direction: row;
										align-items: center;
										font-size: 32rpx;
										&:first-child{
											margin-left: 0;
										}
										text{
											font-size: 22rpx;
											color: #666;
											margin-left: 5rpx;
										}
									}
								}
							}
						}				
					}
				}
			}
		}
	}
</style>